@charset 'utf-8';

@import 'common';


.web{
    width: 100%;
    height: 100%;
    position: relative;
}

html,body{
    width: 100%;
    height: 100%;
}

header{
    width: 100%;
    height: gr(87);
    position: absolute;
    top: 0;
    background: #f7f7f7;
    border-bottom: gr(1) solid #c1c1c1;
}

section{
    width: 100%;
    position: absolute;
    top: gr(88);
    bottom: 0;
    overflow-y:scroll ;
    -webkit-overflow-scrolling: touch;
    background: #f3f4f6;
}



.search-bar{
    width: gr(518);
    height: gr(58);
    margin-left: gr(18);
    margin-top: gr(14);   
    float: left;
    position: relative;
    i{
        display: inline-block;
        font-size: gr(30);
        text-align: right;
        position: absolute;
        left: gr(18);
        line-height: gr(58);
        color: #999999;
    }
    input{
        width: 100%;
        height: 100%;
        border: none;
        font-size: gr(23);
        vertical-align: top;
        text-indent: gr(57);
        border: gr(1) solid #CCCCCC;
        border-radius: gr(8) gr(8);
    }
    
    input::-webkit-input-placeholder{
        color: #cccccc;
    }
}

.cancel{
    width: gr(100);
    height: gr(58);
    margin-top: gr(14); 
    float: right;
    font-size: gr(27); 
    line-height: gr(58);
    text-align: center;
    a{
        color: #999999;
    }
}

.title{
    width: gr(573);
    color: #333333;
    font-size: gr(26);
    font-weight: normal;
    margin: gr(33) auto 0;
}

.items{
    width: gr(573);
    height: gr(194);
    margin: gr(25) auto 0;
    font-size: gr(26);
    li{
        height: gr(52);
        line-height: gr(52);
        padding: 0 gr(33);
        font-size: gr(24);
        color: #666666;
        text-align: center;
        border: gr(1) solid #d7d6d6;
        float: left;
        margin-left: gr(16);
    }  
    
    li:nth-child(1),li:nth-child(4),li:nth-child(7){
        margin-left: 0;
    }
    li:nth-child(4),li:nth-child(5),li:nth-child(6){
        margin-top: gr(16);
        margin-bottom: gr(16);
    } 
}

.history-delete{
    width: gr(498);
    height: gr(76);
    font-size: gr(29);
    color: #666666;
    background: #f7f7f7;
    border: gr(1) solid #d7d6d6;
    text-align: center;
    line-height: gr(76);
    margin: gr(70) auto 0;
    border-radius: gr(8) gr(8);
}

.clear-history-prompt {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    z-index: 122;
    .inner{
        width: gr(550);
        height: gr(300);
        background: #f8f8f8;
        border-radius: gr(10);
        margin: 50% auto 0;
        .top{
            width: gr(500);
            height: gr(154);
            margin: 0 auto;
            border-bottom: gr(1) solid #dcdcdc;
            text-align: center;
            line-height: gr(154);
            font-size: gr(23);
            color: #666666;           
        }
        .bottom{
            width: gr(500);
            height: gr(144);
            margin: 0 auto;
            font-size: 0;
            padding-top: gr(32);
            span{
                width: gr(235);
                height: gr(80);
                font-size: gr(27);
                display: inline-block;
                text-align: center;
                line-height: gr(80);
                border-radius: gr(5);
            }
            span:first-of-type{
               color: #666666;
               background: white;
               border: gr(1) solid #b7b7b7;
            }
            span:last-of-type{
               color: white;
               background: #d62d31;
               margin-left: gr(25);
            }
        }
    }
}